<template>
    <ul>
      <li v-for="(role, roleIndex) in roles" :key="roleIndex">
        <h2>{{ role.roleName }}</h2>
        <ul>
          <li v-for="(menu, menuIndex) in role.menus" :key="menuIndex">
            <h3>{{ menu.menuName }}</h3>
            <ul v-if="menu.childrenMenus && menu.childrenMenus.length > 0">
              <li v-for="(childMenu, childMenuIndex) in menu.childrenMenus" :key="childMenuIndex">
                <h4>{{ childMenu.menuName }}</h4>
                <ul v-if="childMenu.childrenMenus && childMenu.childrenMenus.length > 0">
                  <li v-for="(grandChildMenu, grandChildMenuIndex) in childMenu.childrenMenus" :key="grandChildMenuIndex">
                    <h5>{{ grandChildMenu.menuName }}</h5>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </template>
  
  <script>
  export default {
    name: 'RolePermissions',
    props: {
      roles: {
        type: Array,
        required: true
      }
    }
  };
  </script>
  
  <style scoped>
  /* 在这里添加样式以美化页面 */
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    margin: 10px 0;
  }
  h2, h3, h4, h5 {
    margin: 0;
  }
  </style>
  